<script setup lang="ts">
import useCameraStore from '@renderer/store/useCameraStore';
import { ref } from 'vue';

const store = useCameraStore();

const devices = await navigator.mediaDevices.enumerateDevices();
let videoList = ref<MediaDeviceInfo[]>([]);
videoList.value = devices.filter((item) => item.kind.includes('video'));

const setCamera = (e: string) => {
  store.setCamera(e);
};
</script>

<template>
  <div class="w-screen h-screen bg-[#222b2f] p-4">
    <div class="w-40">
      <el-select v-model="store.cameraId" placeholder="请选择您的摄像头" size="medium" @change="setCamera">
        <el-option :label="video.label" :value="video.deviceId" v-for="video in videoList" :key="video.deviceId" />
      </el-select>
    </div>
  </div>
</template>

<style lang="scss" scoped></style>
